<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-滑动门</title>
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.SuperSlide.2.1.1.js"></script>
<style type="text/css">
body,ul,li{margin:0px;padding:0px}
li{list-style:none}  img{border:0px}
.box{width:1000px;height:500px;margin:0px auto;position:relative}
.box .bd{width:1000px;height:500px;}
.box .bd ul li{width:1000px;height:500px;float:left;}
.box .hd{position:absolute;bottom:0px;width:1000px;height:25px}
.box .hd ul{width:150px;height:25px;margin:0px auto;text-align:center}
.box .hd ul li{width:20px;height:20px;float:left;margin-right:10px;background:#C90;line-height:20px;cursor:pointer}
.box .hd ul li.on{background:#F30}
.box .prev{position:absolute;top:200px;left:15px;cursor:pointer}
.box .next{position:absolute;top:200px;right:15px;cursor:pointer}
.box .pageState{position:absolute;bottom:5px;right:5px;font-family:"微软雅黑";font-size:12px}
</style>
<body>
<div class="box">

<div class="bd">
<ul>
<li><img src="banner1.png"></li>
<li><img src="banner2.png"></li>
<li><img src="banner3.png"></li>
<li><img src="banner4.png"></li>
<li><img src="banner5.png"></li>
</ul>
</div>

<div class="hd">
<ul></ul>
</div>

<div class="pageState">
</div>

<div class="prev"><h1>〈 </h1></div>
<div class="next"><h1> 〉</h1></div>

</div>

<script language="javascript">
$('document').ready(function() {
	$('.box').slide({
   autoPage:true,
   pageStateCell:".pageState",
   titCell:".hd ul",
   mainCell:".bd ul",
   effect:"fold",
   autoPlay:true,
   interTime:2000,
   delayTime:500,
   vis:1,
   scroll:1,
   trigger:"mouseover"
});
});
</script>
</body>
</html>
